<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Tractography</title>
    <link rel="stylesheet" href="niivue.css" />
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript. Please enable it to continue.</strong>
    </noscript>
    <header>
      <label for="shaderDrop">Shader:</label>
      <select id="shaderDrop">
        <option value="Edge">Edge</option>
        <option value="Flat">Flat</option>
        <option value="Matcap">Matcap</option>
        <option value="Matte">Matte</option>
        <option value="Outline" selected>Outline</option>
        <option value="Phong">Phong</option>
        <option value="Toon">Toon</option>
      </select>
      <label for="colorDrop">Color:</label>
      <select id="colorDrop">
        <option value="Global">Global direction</option>
        <option value="Local">Local direction</option>
        <option value="Fixed" selected>Fixed</option>
      </select>
      <label for="fiberRadius">Radius</label>
      <input
        type="range"
        min="0"
        max="20"
        value="0"
        class="slider"
        id="fiberRadius"
      />
      <label for="xRaySlider">MeshXRay</label>
      <input
        type="range"
        min="0"
        max="20"
        value="10"
        class="slider"
        id="xRaySlider"
      />
      <label for="zoomSlider">Zoom</label>
      <input
        type="range"
        min="1"
        max="20"
        value="10"
        class="slider"
        id="zoomSlider"
      />
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
  </body>
</html>
<script type="module" async>
  import * as niivue from "../dist/index.js";
  fiberRadius.oninput = function () {
    nv1.setMeshProperty(nv1.meshes[0].id, "fiberRadius", this.value * 0.1)
    nv1.setMeshProperty(nv1.meshes[1].id, "fiberRadius", this.value * 0.1)
    nv1.setMeshProperty(nv1.meshes[2].id, "fiberRadius", this.value * 0.1)
    nv1.updateGLVolume()
  }
  zoomSlider.onchange = function () {
    nv1.scene.volScaleMultiplier = zoomSlider.value * 0.1;
    nv1.drawScene();
  };
  xRaySlider.onchange = function () {
    nv1.opts.meshXRay = this.value * 0.01;
    nv1.drawScene();
  };
  shaderDrop.onchange = function () {
    const shaderName = this.value;
    nv1.setMeshShader(nv1.meshes[3].id, shaderName);
  };
  colorDrop.onchange = function () {
    const colorName = this.value;
    nv1.setMeshProperty(nv1.meshes[0].id, "fiberColor", colorName);
    nv1.setMeshProperty(nv1.meshes[1].id, "fiberColor", colorName);
    nv1.setMeshProperty(nv1.meshes[2].id, "fiberColor", colorName);
  };
  var volumeList1 = [{ url: "../images/mni152.nii.gz" }];
  var nv1 = new niivue.Niivue({
    show3Dcrosshair: true,
    backColor: [0, 0, 0, 1],
  });
  nv1.opts.isOrientCube = true;
  nv1.setSliceType(nv1.sliceTypeRender);
  await nv1.attachTo("gl1");
  await nv1.loadVolumes(volumeList1);
  await nv1.loadMeshes([
    { url: "../images/tract.FAT_R.vtk", rgba255: [180, 180, 0, 255] },
    { url: "../images/tract.IFOF_R.trk", rgba255: [0, 255, 0, 255] },
    { url: "../images/tract.SLF1_R.tck", rgba255: [0, 0, 255, 255] },
    {
      url: "../images/BrainMesh_ICBM152.lh.mz3",
      rgba255: [242, 174, 177, 255],
      opacity: 0.2,
    },
  ]);
  nv1.setClipPlane([-0.1, 0, 90]);
  nv1.setRenderAzimuthElevation(135, 15);
  document.getElementById("colorDrop").dispatchEvent(new Event("change"));
  document.getElementById("xRaySlider").dispatchEvent(new Event("change"));
  document.getElementById("shaderDrop").dispatchEvent(new Event("change"));
</script>
